<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<fieldset>
				<legend>新商品信息</legend>
				<div class="form-group">
					<label>名称：</label>
					<input type="text" v-model="newProduct.name" />
					<span></span>
				</div>
				<div class="form-group">
					<label>价格：</label>
					<input type="number" v-model="newProduct.price" />
				</div>
				<div class="form-group">
					<label>类别：</label>
					<select v-model="newProduct.category">
						<option v-for="cate in categories" :value="cate">{{cate}}</option>
					</select>
				</div>
				<div class="form-group">
					<label></label>
					<button type="button" @click="createProd">添加</button>
				</div>
			</fieldset>
			<div class="form-group">
				<label>查询关键字</label>
				<input type="text" v-model="key" placeholder="请输入要查询的关键字......" />
			</div>
			<table border="1" cellpadding="1" cellspacing="1">
				<thead>
					<tr>
						<td>序号</td>
						<td>名称</td>
						<td>价格</td>
						<td>类别</td>
						<td>操作</td>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(prod,index) in findProdList">
						<td>{{index+1}}</td>
						<td>{{prod.name}}</td>
						<td>{{prod.price}}</td>
						<td>{{prod.category}}</td>
						<td><button type="button" @click="deleteProd(index)">删除</button></td>
					</tr>
				</tbody>
			</table>
		</div>

		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data: {
					key: "",
					newProduct: {
						name: "",
						price: 0,
						category: "手机/数码"
					},
					categories: [
						"手机/数码", "家居/家具", "男装/女装", "电脑/办公", "房产/汽车"
					],
					products: [{
							name: "XPhone 10",
							price: 4999,
							category: "手机/数码"
						},
						{
							name: "男士卫衣",
							price: 100,
							category: "男装/女装"
						},
					]
				},
				filters: {
					priceFormat: function(val) {
						return "¥" + parseInt(val).toFixed(2) + "元"
					}
				},
				methods: {
					createProd: function() {
						this.products.push(this.newProduct);
						this.newProduct = {
							name: "",
							price: 0,
							category: "手机/数码"
						}
					},
					deleteProd: function(index) {
						if(confirm("你确定要删除当前信息吗？")){
							this.products.splice(index, 1)
						}
					},
				},
				computed: {
					findProdList: function() {
						var _this = this;
						return _this.products.filter(function(prod) {
							return prod.name.indexOf(_this.key) != -1;
						});
					}
				}
			})
		</script>
	</body>
</html>
